import React from "react";
import { connect } from "react-redux";
import URL from "url";
import { Tabs, WhiteSpace } from "antd-mobile";
import { loadShowListtabaDataAysnc } from "@/components/main/showList/actionCreator";
import { ShowListtest } from "./styled";
import BScroll from "better-scroll";

class ShowList extends React.Component {
  state = {
    page: 1,
    category_id: 0
  };
  render() {
    // console.log(this.props.list.toJS());
    const tabs = [
      { category_id: "0", title: "全国" },
      { category_id: "35", title: "演唱会" },
      { category_id: "36", title: "音乐会" },
      { category_id: "37", title: "话剧歌剧" },
      { category_id: "38", title: "儿童亲子" },
      { category_id: "79", title: "音乐剧" },
      { category_id: "91", title: "戏剧综艺" },
      { category_id: "99", title: "展览" },
      { category_id: "86", title: "舞蹈芭蕾" }
    ];

    return (
      <div>
        <ShowListtest>
          <div className="listtop">
            <span className="retur">&lt;</span>
            <p className="yan">演出</p>
            <span className="fu">...</span>
          </div>
          <WhiteSpace />
          <Tabs
            tabs={tabs}
            renderTabBar={props => <Tabs.DefaultTabBar {...props} page={5} />}
            onTabClick={res => {
              this.props.loadgetTabsLoadData.call(this, res);
            }}
          ></Tabs>
          <WhiteSpace />
          <div
            className="showlist_tab"
            style={{
              height: "520px",
              overflow: "hidden"
            }}
          >
            <div className="test">
              {this.props.list.map((item, index) => (
                <a href={item.url} key={index}>
                  <div className="recommend_list">
                    <span className="recommend_pic">
                      <img src={item.get("pic")} alt={item.get("name")} />
                    </span>
                    <div className="recommend_content">
                      <span className="recommend_time">
                        {item.get("end_show_time")}
                      </span>
                      <span className="recommend_name">{item.get("name")}</span>
                      <span className="recommend_city">
                        {item.get("city_name")}&nbsp;&nbsp;|&nbsp;&nbsp;
                        {item.get("venue_name")}
                      </span>
                      <span className="recommend_price">
                        <span className="recommend_price_num">
                          ￥{item.get("min_price")}
                        </span>
                        起
                      </span>
                    </div>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </ShowListtest>
      </div>
    );
  }
  componentDidMount() {
    // 获取传入参数
    var category_id =
      URL.parse(this.props.location.search, true).query.caid || 0;
    this.setState({ category_id }, () => {
      this.props.loadShowListtabaDataAysnc.call(this);
    });
  }
}
const mapStateToProps = state => {
  return {
    currentCity: state.getIn(["indexReducer", "currentCity"]),
    list: state.getIn(["listReducer", "list"])
  };
};

const mapDispatchToProps = dispatch => {
  return {
    // 初始化调用
    loadShowListtabaDataAysnc(status) {
      var temp = {
        page: this.state.page,
        category: this.state.category_id,
        city_id: this.props.currentCity.get("city_id"),
        status
      };
      loadShowListtabaDataAysnc(dispatch, temp, () => {
        setTimeout(() => {
          this.props.initBScroll.call(this);
          this.BScroll.refresh();
          this.BScroll.finishPullUp();
        }, 66);
      });
    },
    // 切换调用
    loadgetTabsLoadData(res) {
      var category_id = res.category_id; //获取初始化ID
      this.setState({ category_id, page: 1 }, () => {
        this.props.loadShowListtabaDataAysnc.call(this);
      });
    },
    // 滚动调用
    initBScroll() {
      this.BScroll = new BScroll(document.querySelector(".showlist_tab"), {
        scrollY: true, //开启纵向滚动
        probeType: 3, //实时scroll top
        click: true,
        pullUpLoad: true
      });
      // 下拉刷新
      this.BScroll.on("pullingUp", pos => {
        this.setState({ page: ++this.state.page }, () => {
          this.props.loadShowListtabaDataAysnc.call(this, "concat");
        });
      });
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(ShowList);
